import React, { Component } from 'react';
import { NavLink} from 'react-router-dom';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import {add} from './redux/Actions.js';

class View extends Component{
    render(){
         const { onAdd } = this.props;
         console.log(this.props.add)
         // const { store } = this.context;
         // const state = store.getState();
         // console.log(this.props)
         const list = this.props.add.map((val,key)=>{
             return(
                 <li key={key}>
                        <span>{val.text}</span>
                 </li>
             )
         })
        return(
            <div className="m">
                <NavLink to="/">这是首页</NavLink><br/>
                <NavLink to="/filter">filter</NavLink><br/>
                <NavLink to="/add">add</NavLink><br/>
                <NavLink to="/action">action</NavLink><br/>
                <NavLink to="/newaction">newaction</NavLink><br/>
                <h3>redux来实现一个加号</h3>
                <div onClick={onAdd}>点我点</div>
                <ul>{list}</ul>
            </div>
        )
    }
}
View.propTypes = {
	onAdd: PropTypes.func.isRequired,
};

//需要渲染什么数据
//作为函数，mapStateToProps执行后应该返回一个对象
function mapStateToProps(state) {
  return {
      add:state.add
  }
}
//是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数。
const mapDispatchToProps = (dispatch, ownProps) => {
	const {id} = ownProps;
	return {
		onAdd: () => dispatch(add(id))
	}
};
export default connect(mapStateToProps,mapDispatchToProps)(View);
